<template>
  <el-row>
    <el-row>
      <h1>取班明细导入</h1>
    </el-row>
    <el-row
      v-loading.fullscreen.lock="loading"
      element-loading-text="生成班表中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <form-componet :form-label="formModelLabel" :form-model="formModel" :label-position="labelPosition">
        <el-row>
          <el-col :span="8" :offset="8">
            <el-upload
              class="upload-demo"
              ref="upload"
              name="uploadFile"
              action="/scheduleQX/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-progress="onLoading"
              :on-success="onSuccess"
              :on-error="onError"
              v-loading="loading"
              element-loading-text="正在上传取班明细"
              element-loading-spinner="el-icon-loading"
            >
              <el-button slot="trigger" size="medium">上传取班明细</el-button>
              <el-button size="mini" @click="downloadQx">导出</el-button>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-button @click.prevent="onsubmit" type="primary">
            提交
          </el-button>
        </el-row>
      </form-componet>
      <el-link icon="el-icon-tickets" href="/download/取班明细表导入模板.xls" type="primary">模板下载</el-link>
    </el-row>
  </el-row>
</template>

<script>
import FormComponet from "../../components/FormComponet";

export default {
  name: "ScheduleQX",
  components: {
    FormComponet
  },
  data() {
    return {
      loading: false,
      labelPosition: "top",
      fileList: [],
      formModel: {
        monthDate: ""
      },
      formModelLabel: [
        {
          model: "monthDate",
          type: "datePicker",
          dateType: "month",
          name: "请选择取班日期"
        }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    onLoading() {
      this.loading = true;
    },
    unLoading() {
      this.loading = false;
    },
    onError(err) {
      this.loading = false;
      this.$alert(err, "上传失败", { dangerouslyUseHTMLString: true });
    },
    onSuccess() {
      this.loading = false;
      this.$alert("文件上传成功", "成功", {
        type: "success",
        confirmButtonText: "确定"
      });
    },
    onsubmit() {
      this.onLoading();
      this.$http
        .get("/scheduleQX/updateQuXiao?monthDate=" + this.formModel.monthDate)
        .then(res => {
          this.unLoading();
          this.$alert(res.data, "成功", {
            type: "success"
          });
        })
        .catch(err => {
          this.unLoading();
          console.log(err);
        });
    },
    downloadQx() {
      if (this.formModel.monthDate) {
        window.open("/scheduleQX/downloadQx?monthDate=" + this.formModel.monthDate);
      } else {
        this.$alert("日期不能为空！", "警告", {
          type: "warning",
          confirmButtonText: "确定"
        });
      }
    }
  }
};
</script>

<style scoped></style>
